<script lang="ts">
export default {
    name: "Bread",
    methods:{
        moveTag(){
            const query = {...this.$route.query};
            [...arguments].forEach(function(item){
                delete query[item]
            })
            this.$router.push({
                path:"/search",
                query
            })
        },
        moveProps(propsStr){
            const props = this.queryProps.filter(v=> v.props!==propsStr).map(item=>item.props);
            const query = {...this.$route.query};
            if(props.length>0) query.props = props;
            else delete query.props;
            this.$router.push({
                path:"/search",
                query
            })
        }
    },
    computed:{
        queryProps(){
            let {props=[]} = this.$route.query;
            if(!Array.isArray(props)) props=[props];
            return props.map((item,id)=>({
                id,
                str:item.split(':')[1]+":"+item.split(':')[3],
                props:item
            }));
        }
    }
}
</script>

<template>
    <div v-if="Object.keys($route.query).filter(v=>!['pageNo','order'].includes(v)).length>0" class="bread">
    <ul class="fl sui-breadcrumb">
        <li>
            <a href="#">全部结果</a>
        </li>
    </ul>
    <ul class="fl sui-tag">
        <li v-if="$route.query.keyword" class="with-x">关键字：{{$route.query.keyword}}<i @click="moveTag('keyword')">×</i></li>
        <li v-if="$route.query.categoryName" class="with-x">{{$route.query.categoryName}}<i @click="moveTag('categoryName','category1Id','category2Id','category3Id')">×</i></li>
        <li v-if="$route.query.trademark" class="with-x">{{$route.query.trademark.split(':')[1]}}<i @click="moveTag('trademark')">×</i></li>
        <li v-for="item in queryProps" class="with-x" :key="item.id">{{item.str}}<i @click="moveProps(item.props)">×</i></li>
    </ul>
</div>
</template>

<style scoped lang="less">
.bread{
    margin-bottom: 5px;
    overflow: hidden;
    .sui-breadcrumb{
        padding: 3px 15px;
        margin: 0;
        font-weight: 400;
        border-radius: 3px;
        float:left;
        li{
            display: inline-block;
            line-height: 18px;
            a{
                color: #666;
                text-decoration: none;
                &:hover{
                    color: #4cb9fc;
                }
            }
        }
    }
    .sui-tag{
        margin-top: -5px;
        list-style: none;
        font-size: 0;
        line-height: 0;
        padding: 5px 0 0;
        //margin-bottom: 18px;
        float: left;
        .with-x{
            font-size: 12px;
            margin: 0 5px 5px 0;
            display: inline-block;
            overflow: hidden;
            color: #000;
            background: #f7f7f7;
            padding: 0 7px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #dedede;
            white-space: nowrap;
            transition:color 400ms;
            cursor: pointer;
            i{
                margin-left: 10px;
                cursor: pointer;
                font: 400 14px tahoma;
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            &:hover{
                color: #28a3ef;
            }
        }
    }
}
</style>
